<template>
  <div class="motorFactory" :style="{transform:'scale('+scaleNum+')','transform-origin':'0px 0px'}">
    <div class="title" v-if="chineseArr.fourteen || englishArr.fourteen">
      <div class="logo" @click="goChooseBoard" v-focusable></div>
      <div :class="languageStr==='English'?'content':'encontent'">
        <span>{{ languagePack.fourteen }}</span>
      </div>
      <div class="timer">
        <span>{{ time }}</span>
      </div>
      <div class="laugBox">
        <div class="changeLau" @click="changeLaug" v-focusable>
          <img width="38px" v-if="languageStr==='简体中文'" src="~images/bigScreen/motorFactory/china.png"
               alt/>
          <img width="38px" v-if="languageStr==='English'" src="~images/bigScreen/motorFactory/english.png"
               alt/>
          <span>{{ languageStr }}</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="leftCol">
        <div class="changeIcon">
          <span class="icontext">{{ languagePack.one }}</span>
        </div>
        <div class="list">
          <template v-for="(item,index) of devList">
            <div class="devItem"
                 v-focusable
                 :key="index"
                 :class="item.pointer?'devItemCheck':''"
                 @click="changeDev(item,'点击')">
              <div class="machine">
                              <span v-if="languageStr === 'English'">
                                {{ item.deviceName }}
                              </span>
                <span v-else>
                                {{ item.deviceEnglishName }}
                              </span>
              </div>
            </div>
          </template>
        </div>
      </div>
      <div class="rightCol">
        <div class="smallBox">
          <div class="oneBox">
            <div class="updownitem">
              <img width="100px" v-if="devShowItem.state===1"
                   src="~images/bigScreen/motorFactory/devGreen.png" alt/>
              <img width="100px" v-if="devShowItem.state===2"
                   src="~images/bigScreen/motorFactory/LampYellow.png" alt/>
              <img width="100px" v-if="devShowItem.state===5"
                   src="~images/bigScreen/motorFactory/devRed.png" alt/>
              <img width="100px" v-if="devShowItem.state===-99"
                   src="~images/bigScreen/motorFactory/devDark.png" alt/>
            </div>
            <div class="updownitem" style="position: relative">
              <span class="upitem">{{ languagePack.two }}</span>
              <span class="downitem" v-if="devShowItem.state===1">{{ languagePack.sixteen }}</span>
              <span class="downitem" v-if="devShowItem.state===2">{{ languagePack.seventeen }}</span>
              <span class="downitem" v-if="devShowItem.state===5">{{ languagePack.eighteen }}</span>
              <span class="downitem" v-if="devShowItem.state===-99">{{ languagePack.nineteen }}</span>
              <p class="faultMessage">{{devShowItem.faultMessage}}</p>
            </div>
            <div class="updownitem">
              <span class="upitem">{{ languagePack.thirteen }}</span>
              <span class="downitem">{{ devShowItem.durationString || 0 }}</span>
              <p class="faultMessage"></p>
            </div>
            <div class="updownitem">
              <div class="shuitem"></div>
            </div>
            <div class="updownitem">
              <!-- <span class="upitem1">{{ devShowItem.deviceName }}</span> -->
              <span class="upitem1" v-if="languageStr === 'English'">
                                {{ devShowItem.deviceName }}
                            </span>
              <span class="upitem1" v-else>
                                {{ devShowItem.deviceEnglishName }}
                            </span>
              <span class="downitem1">{{ languagePack.fifteen }}:{{ devShowItem.deviceNo }}</span>
            </div>
          </div>
          <div class="twoBox">
            <div :class="languageStr==='English'?'shubox':'shubox1'">
              <span>{{ languagePack.three }}</span>
            </div>
            <div>
              <img width="60px" src="~images/bigScreen/motorFactory/numicon.png" alt/>
            </div>
            <div class="hengbox">
              <span>{{ devItem.deviceType==='手动折弯机'?languagePack.four1:languagePack.four }}</span>
            </div>
            <div class="singleImg" v-for="(item2,index) of yeildArr" :key="index"><span>{{ item2 }}</span>
            </div>
            <div class="hengbox1">
              <span>PCS</span>
            </div>
          </div>
        </div>
        <div class="smallBox">
          <div class="boxtitle">
            <span class="chinese">{{ languagePack.ten }}</span>
          </div>
          <div class="chartBox">
            <div class="leftBox" id="statusRatio"></div>
            <div class="singleBox">
              <div class="singleprogress">
                <div class="procontent">
                  <span>{{ languagePack.sixteen }} {{ statusObj.runRatio || 0 }}%</span>
                  <span>{{ statusObj.runTime }}min</span>
                </div>
                <Progress :percent="statusObj.runRatio" hide-info stroke-color="rgb(55,211,118)"/>
              </div>
              <div class="singleprogress">
                <div class="procontent">
                  <span>{{ languagePack.seventeen }} {{ statusObj.waitRatio || 0 }}%</span>
                  <span>{{ statusObj.waitTime }}min</span>
                </div>
                <Progress :percent="statusObj.waitRatio" hide-info stroke-color="rgb(254,130,83)"/>
              </div>
              <div class="singleprogress">
                <div class="procontent">
                  <span>{{ languagePack.eighteen }} {{ statusObj.alarmRatio || 0 }}%</span>
                  <span>{{ statusObj.alarmTime }}min</span>
                </div>
                <Progress :percent="statusObj.alarmRatio" hide-info stroke-color="rgb(247,28,47)"/>
              </div>
              <div class="singleprogress">
                <div class="procontent">
                  <span>{{ languagePack.nineteen }} {{ statusObj.shutdownRatio || 0 }}%</span>
                  <span>{{ statusObj.shutdownTime }}min</span>
                </div>
                <Progress :percent="statusObj.shutdownRatio" hide-info stroke-color="rgb(92,105,141)"/>
              </div>
            </div>
          </div>
        </div>
        <div class="smallBox">
          <div class="boxtitle">
            <span class="chinese">{{ devItem.deviceType==='手动折弯机'?languagePack.nine1:languagePack.nine }}</span>
            <div class="titleIcon">
              <div class="iconContent">
                <span>{{ devItem.deviceType==='手动折弯机'?languagePack.four1:languagePack.four }}</span>
                <img width="30px" src="~images/bigScreen/motorFactory/yeildicon.png" alt/>
              </div>
            </div>
          </div>
          <div class="chartBox" id="sevenDayYeild"></div>
        </div>
        <div class="bigBox">
          <div class="edgeBox">
            <div class="standardBeat">
              <span class="label">{{languagePack.stardBeat}}</span><span class="txt">{{ devShowItem.cycleCount }}</span><span class="unit"> {{languagePack.secDate}}</span>
            </div>
            <div class="classOeeBox" id="classOEE"></div>
            <div class="apqloss">
              <div class="apqtitle">{{ languagePack.three }}APQ</div>
              <div class="apqBox">
                <div class="apqsingle">
                  <span class="apqname">A</span>
                  <span class="apqnum">{{ devShowItem.a || 0 }}%</span>
                </div>
                <div class="apqsingle">
                  <span class="apqname">P</span>
                  <span class="apqnum">{{ devShowItem.p || 0 }}%</span>
                </div>
                <div class="apqsingle">
                  <span class="apqname">Q</span>
                  <span class="apqnum">{{ devShowItem.q || 0 }}%</span>
                </div>
              </div>
            </div>
          </div>
          <div class="centerBox">
                      <span class="imgBox">
                          <img :src="devItem.filePath" alt/>
                      </span>
          </div>
          <div class="edgeBox1">
            <div class="upcollect">
                          <span class="imgBox">
                             <img src="~images/bigScreen/motorFactory/collectIcon.png" alt/>
                          </span>
              <div class="uptitle">
                <span class="uptitleup">{{ languagePack.eleven }}</span>
                <!-- <span class="uptitledown">
                 {{ devShowItem.deviceName }}
                </span> -->
                <span class="uptitledown" v-if="languageStr === 'English'">
                                    {{ devShowItem.deviceName }}
                                </span>
                <span class="uptitledown" v-else>
                                    {{ devShowItem.deviceEnglishName }}
                                </span>
              </div>
            </div>
            <div class="downcollect">
              <!-- <div class="singlecolImg" v-for="(item3,index) of collectArr" :key="index">
                  <span>{{item3.name}}</span>
                  <span>{{item3.value}}</span>
              </div> -->
              <vue-seamless-scroll :data="collectObj"
                                   class="seamless-warp size"
                                   :class-option="classOption"
                                   v-if="collectObj.length > 0">
                <template v-for="(item,index) in collectObj">
                  <div class="singlecolImg" :key="index">
                    <span class="singleKeyL">{{ item.key }}</span>
                    <span class="singleKeyR">{{ item.value }}</span>
                  </div>
                </template>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="smallBox">
          <div class="boxtitle">
            <span class="chinese">{{ languagePack.eight }}</span>
            <div class="titleIcon">
              <div class="iconContent">
                <span>OEE</span>
                <img width="30px" src="~images/bigScreen/motorFactory/dayoeeicon.png" alt/>
              </div>
            </div>
          </div>
          <div class="chartBox" id="sevenDayOEE"></div>
        </div>
        <div class="smallBox">
          <div class="boxtitle">
            <span class="chinese">{{ languagePack.five }}</span>
            <div class="titleIcon">
              <div class="iconContent">
                <span>OEE</span>
                <img width="30px" src="~images/bigScreen/motorFactory/timeoeeicon.png" alt/>
              </div>
            </div>
          </div>
          <div class="sectionBox">
            <div class="boxBorder">
              <div class="initChart" v-for="(item,index) of devStatusRecords" :key="'after'+index"
                   :style="item | formatStyle">

              </div>
            </div>
            <div class="boxTime">
              <span>{{ statusTImeArr.startTime }}</span>
              <span>{{ statusTImeArr.endTime }}</span>
            </div>
          </div>
          <div class="chartBox1" id="timeOEE"></div>
        </div>
        <div class="smallBox">
          <div class="boxtitle">
            <span class="chinese">{{ languagePack.six }}</span>
            <div class="titleIcon">
              <div class="iconContent">
                <span>MTBF</span>
                <img width="30px" src="~images/bigScreen/motorFactory/mtbficon.png" alt/>
              </div>
              <div class="iconytd">
                                <span
                                    style="margin-right:10px">{{
                                    this.languageStr === 'English' ? '当年YTD值' : 'YTD'
                                  }}</span>
                <span>{{ mtbfYtd }}/h</span>
              </div>
            </div>
          </div>
          <div class="chartBox" id="mtbfechart"></div>
        </div>
        <div class="smallBox">
          <div class="boxtitle">
            <span class="chinese">{{ languagePack.seven }}</span>
            <div class="titleIcon">
              <div class="iconContent">
                <span>MTTR</span>
                <img width="30px" src="~images/bigScreen/motorFactory/mttricon.png" alt/>
              </div>
              <div class="iconytd">
                                <span
                                    style="margin-right:10px">{{
                                    this.languageStr === 'English' ? '当年YTD值' : 'YTD'
                                  }}</span>
                <span>{{ mttrfYtd }}/min</span>
              </div>
            </div>
          </div>
          <div class="chartBox" id="mttrechart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts';

let moment = window.$this.moment;
let myChart, myChart1, myChart2, myChart3, myChart4, myChart5, myChart6, myChart7;
export default {
  name: "motorFactory",
  components: {vueSeamlessScroll},
  computed: {
    classOption() {
      return {
        step: 0.3,
        limitMoveNum: 5,
        hoverStop: false,
        direction: 1,
        openWatch: true,
        singleHeight: 0,
        singleWidth: 0,
        waitTime: 1500
      }
    }
  },
  data() {
    return {
      devStatusRecords: [],
      time: '',
      devList: [],
      devItem: {},
      pageNum: 1,
      pageSize: 99,
      scaleNum: '',
      chineseArr: {
        one: '设备列表',
        two: '当前状态',
        three: '当前班次',
        four: '产量',
        five: '当天设备整点OEE',
        six: '设备MTBF分析',
        seven: '设备MTTR分析',
        eight: '当月每日OEE',
        nine: '过去7天产量',
        ten: '当前班次设备状态占比',
        eleven: '设备采集信息',
        twelve: '单位',
        thirteen: '持续时长',
        fourteen: '未知',
        fifteen: '设备编号',
        sixteen: '运行',
        seventeen: '待机',
        eighteen: '报警',
        nineteen: '断线',
        four1: '折弯次数',
        nine1: '过去7天折弯次数',
        stardBeat:"标准节拍",
        secDate:"秒/次"
      },
      englishArr: {
        one: 'Equipment List',
        two: 'Status',
        three: 'Shift ',
        four: 'Output',
        five: 'Hourly OEE',
        six: 'MTBF',
        seven: 'MTTR',
        eight: 'Daily OEE',
        nine: 'Output during past 7 days',
        ten: 'Status Ratio',
        eleven: 'Key Parameter',
        twelve: 'Unit',
        thirteen: 'Duration',
        fourteen: 'Unknown',
        fifteen: 'Equipment No',
        sixteen: 'Running',
        seventeen: 'Waiting',
        eighteen: 'Alarming',
        nineteen: 'Stopping',
        four1: 'Bending ',
        nine1: 'Bending during past 7 days',
        stardBeat:"Beat",
        secDate:"Sec/Time"
      },
      languageStr: 'English',
      languagePack: {},
      devShowItem: {},
      yeildArr: [],
      hierarchyCode: 'UPB5IESF6HVNDSWXENITEK25N',
      statusTImeArr: {},
      collectArr: [],
      collectObj: [],
      statusObj: {},
      timer1: null,
      selectDev: 0,
      mtbfYtd: '',
      mttrfYtd: '',
      languageShowF: false
    }
  },
  mounted() {


  },
  activated() {

    if (window.localStorage.getItem('language') === 'en_US') {
      this.languageStr = '简体中文'
      this.languagePack = this.englishArr
      this.$i18n.locale = 'en_US'
    } else {
      this.languageStr = 'English'
      this.languagePack = this.chineseArr
      this.$i18n.locale = 'zh_CN'
    }

    this.$tv.findFocusType = 0;
    this.$tv.initDis = 49
    this.$tv.offsetDistance = 50
    let queryInfo = this.$route.query
    if (queryInfo && queryInfo.hierarchyCode) {
      this.hierarchyCode = queryInfo.hierarchyCode
    }
    this.getName()
    // this.languagePack = this.chineseArr
    this.getDevList();
    this.onresize()
    window.addEventListener('resize', this.onresize, false);
    this.timer2 = setInterval(this.autoScroll, 60000);
    this.$nextTick(() => {
      this.$tv.scrollEl = this.$tv.getElementByPath('//div[@class="list"]')
    })
  },
  methods: {
    getName() {
      this.axios({
        method: 'post',
        url: '/dms/large/screen/detail',
        data: {
          url: this.$router.history.current.fullPath
        }
      }).then(res => {
        if (res.code === 200) {
          if(res.data&&res.data!==null){
            this.chineseArr.fourteen = res.data.titleCN
            this.englishArr.fourteen = res.data.titleEN
          }
          this.languagePack = this.chineseArr
        }
      })
    },
    goChooseBoard() {
      this.$router.push({path: '/chooseBoard'})
    },
    //切换语言
    changeLaug() {
      if (this.languageStr === 'English') {
        this.languageStr = '简体中文'
        this.languagePack = this.englishArr
        window.localStorage.setItem('language','en_US')
      } else {
        this.languageStr = 'English'
        this.languagePack = this.chineseArr

        window.localStorage.setItem('language','zh_CN')
      }
      this.changeDevTimer()
    },
    //计算缩放
    onresize() {
      const Width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      const Height = window.innerHeight || document.documentElement.clientWidth || document.body.clientHeight;
      const scaleW = Width < 1920 ? (Width / 1920) : 1;
      const scaleH = Height < 1080 ? (Height / 1080) : 1;
      this.scaleNum = scaleW > scaleH ? scaleH : scaleW
    },
    //设备列表
    getDevList() {
      // todo 通力生产环境 需要更换成  'UPB5IESF6HVNDSWHZ72X4MS64'
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        // hierarchyCode: 'UPB5IESF6HVNDSWXENITEK25N'
        hierarchyCode: this.hierarchyCode
      }
      this.axios({
        method: 'get',
        url: '/dms/performanceBoard/findAllDevice',
        params: params
      }).then(res => {
        if (res.code === 200) {
          this.devList = res.data.list.map(item => {
            return {
              ...item,
              pointer: false,
              filePath:this.util.filePathToUrl(item.filePath)
            }
          })
          if (this.devList.length > 0) {
            this.changeDev(this.devList[0])
          }
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //自动滚动
    autoScroll() {
      this.selectDev += 1
      if (this.selectDev >= this.devList.length) {
        this.selectDev = 0
        this.getDevList()
      } else {
        this.changeDev(this.devList[this.selectDev])
      }

    },
    //切换设备定时器
    changeDevTimer() {
      this.getMTBF(this.devItem.deviceNo)
      this.getMTTR(this.devItem.deviceNo)
      this.getSevenDayYeild(this.devItem.deviceNo)
      this.getDevState(this.devItem.deviceId, this.devItem.deviceNo, this.devItem.deviceName,this.devItem.deviceEnglishName)
      this.getstatusRatio(this.devItem.deviceNo)
      this.gettimeOEE(this.devItem.deviceNo)
      this.getsevenDayOEE(this.devItem)
      this.getCollectInfo(this.devItem.deviceNo)
    },
    //切换设备调用
    changeDev(item, type) {
      this.languageShowF = false
      for (let i = 0; i < this.devList.length; i++) {
        if (this.devList[i].deviceId === item.deviceId) {
          if (type === '点击') {
            clearInterval(this.timer2);
            this.timer2 = setInterval(this.autoScroll, 60000);
          }
          this.selectDev = i
          this.devList[i].pointer = true
          this.devItem = {...item}
          this.changeDevTimer()
          // clearInterval(this.timer2);
          // this.timer2 = setInterval(this.changeDevTimer, 180000);
        } else {
          this.devList[i].pointer = false
        }
      }
    },
    //采集信息
    getCollectInfo(id) {
      this.axios({
        method: 'post',
        url: '/dms/agv/agv_field',
        params: {
          vehicleId: id,
        }
      }).then(res => {
        if (res.code === 200) {
          // if(res.data.dataColTime){
          //     delete res.data.dataColTime
          // }
          // let arr=[]
          // for(let i=0;i<Object.keys(res.data).length;i++){
          //     arr.push({name:Object.keys(res.data)[i],value:res.data[Object.keys(res.data)[i]]})
          // }
          // this.collectArr = arr
          // this.collectObj = res.data
          if (res.data) {
            let data = res.data.map((item) => {
              return {key: item.attrChineseName, value: item.attributeValue};
            })
            this.collectObj = data
          }
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //当前设备状态
    getDevState(id, deviceNo, deviceName,deviceEnglishName) {
      this.axios({
        method: 'post',
        url: '/dms/agv/agv_state',
        params: {
          vehicleId: deviceNo,
        }
      }).then(res => {
        if (res.code === 200) {
          this.devShowItem = {...res.data, deviceNo, deviceName,deviceEnglishName}
          this.yeildArr = this.padding1(res.data.yield, 4).toString().split("")
          this.classOEEChart(res.data.oee)
          const dateInfo = res.data.now
          this.time = dateInfo
          clearInterval(this.timer1);
          let timeNum = Number(new Date(dateInfo).getTime())
          this.timer1 = setInterval(() => {
            timeNum += 1000
            this.time = this.$moment(new Date(timeNum)).format('YYYY-MM-DD HH:mm:ss');
          }, 1000)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //产量补0
    padding1(num, length) {
      for (let len = (num + "").length; len < length; len = num.length) {
        num = "0" + num;
      }
      return num;
    },
    //过去七日产量接口
    getSevenDayYeild(id) {
      this.axios({
        method: 'post',
        url: '/dms/agv/agv_task_count',
        params: {
          vehicleId: id,
        }
      }).then(res => {
        if (res.code === 200) {
          let xDay = Object.keys(res.data).map((item) => {
            return item.substring(5, 10);
          })
          this.sevenDayYeildChart(xDay, Object.values(res.data))
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //过去七日产量
    sevenDayYeildChart(x, y) {
      if (myChart != null && myChart != "" && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      myChart = echarts.init(document.getElementById("sevenDayYeild"));
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: x,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          name: this.languageStr === 'English' ? '单位:PCS' : 'Unit:PCS',
          // nameTextStyle: {
          //     padding: [0, y.length>0?55:0, 0, 0] // 上右下左与原位置距离
          // },
          axisLabel: {
            formatter: '{value}',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(42,74,104)'
            }
          }
        },
        series: [
          {
            data: y,
            type: 'bar',
            barWidth: '20%',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {offset: 0, color: 'rgba(0,166,240,1)'},
                  {offset: 0.5, color: 'rgba(0,202,246,1)'},
                  {offset: 1, color: 'rgba(2,235,247,1)'}
                ]),
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "12",
                    color: "#fff"
                  }
                }
              },
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //当月oee接口
    getsevenDayOEE(item) {
      this.axios({
        method: 'post',
        url: '/dms/agv/agv_month_oee',
        params: {
          vehicleId: item.deviceNo,
        }
      }).then(res => {
        if (res.code === 200) {
          let xdata = Object.keys(res.data).map((item) => {
            return item.substring(5, 10);
          })
          let ydata = Object.values(res.data)
          let yarr = []
          for (let i = 0; i < xdata.length; i++) {
            yarr.push([xdata[i], ydata[i]])
          }
          let arr = Object.keys(res.data)
          let startgap = 0
          if (arr.length > 0) {
            const now = this.$moment(this.time).format('YYYY-MM-DD 00:00:00')
            const first = this.$moment(arr[0]).format('YYYY-MM-DD HH:mm:ss')
            const gap = (new Date(now) - new Date(first)) / 86400000
            const half = Math.ceil(arr.length / 2)
            if (gap >= parseInt(half / 2)) {
              startgap = parseInt((gap - parseInt(half / 2)) / arr.length * 100)
            }
          }
          this.sevenDayOEEChart(xdata, yarr, item, startgap)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //七日OEE
    sevenDayOEEChart(x, y, item, startgap) {
      if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
        myChart1.dispose(); //销毁
      }
      myChart1 = echarts.init(document.getElementById("sevenDayOEE"));
      let gap = startgap > 50 ? 50 : startgap
      myChart1.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '8%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: x,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value}%',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: false,
            // show: true,
            // lineStyle: {
            //     type: 'dashed',
            //     color:'rgb(42,74,104)'
            // }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: gap,
            end: gap + 50,
          },
        ],
        series: [
          {
            name: 'OEE',
            type: 'effectScatter',
            itemStyle: {
              color: 'rgb(2,237,246)'
            },
            symbolSize: 8,
            markLine: {
              symbol: "none",
              data: [
                {
                  name: '基准线',
                  yAxis: item.controlMin,
                  lineStyle: {
                    normal: {
                      color: "rgb(142,60,94)",
                      width: 1,
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'LSL',
                    color: "rgb(202, 202, 202)",
                  }
                },
                {
                  name: '基准线',
                  yAxis: item.standardMin,
                  lineStyle: {
                    normal: {
                      color: "rgb(134,145,96)",
                      width: 1,
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'LCL',
                    color: "rgb(202, 202, 202)",
                  }
                },
                {
                  name: '基准线',
                  yAxis: item.standard,
                  lineStyle: {
                    normal: {
                      color: "rgb(56,162,116)",
                      width: 2,
                      type: "solid",
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'CL',
                    color: "rgb(202, 202, 202)",
                  }
                },
                {
                  name: '基准线',
                  yAxis: item.controlMax,
                  lineStyle: {
                    normal: {
                      color: "rgb(134,145,96)",
                      width: 1,
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'UCL',
                    color: "rgb(202, 202, 202)",
                  }
                },
                {
                  name: '基准线',
                  yAxis: item.standardMax,
                  lineStyle: {
                    normal: {
                      color: "rgb(142,60,94)",
                      width: 1,
                    }
                  },
                  label: {
                    show: true,
                    position: 'end',
                    formatter: 'USL',
                    color: "rgb(202, 202, 202)",
                  }
                },
              ]
            },
            data: y.length > 0 ? y : [['7/13', 50], ['7/14', 40], ['7/15', 30], ['7/16', 66], ['7/17', 77], ['7/18', 54], ['7/19', 33]],
          },
        ]
      });
      window.addEventListener("resize", function () {
        myChart1.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //设备整点oee接口
    gettimeOEE(id) {
      this.axios({
        method: 'post',
        url: '/dms/agv/agv_hour_oee',
        params: {
          vehicleId: id,
        }
      }).then(res => {
        if (res.code === 200) {
          let total = ''
          if (res.data.deviceStateDtoList.length > 1) {
            total = moment(res.data.deviceStateDtoList[res.data.deviceStateDtoList.length - 1].endTime) - moment(res.data.deviceStateDtoList[0].startTime)
            this.statusTImeArr = {
              startTime: res.data.deviceStateDtoList[0].startTime.substring(10, 16),
              endTime: res.data.deviceStateDtoList[res.data.deviceStateDtoList.length - 1].endTime.substring(10, 16),
            }
          }
          let stateList = res.data.deviceStateDtoList.map((item) => {
            let widthValue = (moment(item.endTime) - moment(item.startTime)) / total * 100
            return {...item, 'Width': widthValue};
          })
          this.devStatusRecords = stateList
          this.timeOEEChart(Object.keys(res.data.oeeSomeDay), Object.values(res.data.oeeSomeDay), Math.max.apply(null, Object.values(res.data.oeeSomeDay)))
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //当天设备整点OEE
    timeOEEChart(x, y, max) {
      if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
        myChart2.dispose(); //销毁
      }
      myChart2 = echarts.init(document.getElementById("timeOEE"));
      myChart2.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: x.length > 0 ? x : ['09', '10', '11', '12', '13', '14', '15'],
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          min: 0,
          max: max > 100 ? max : 100,
          type: 'value',
          axisLabel: {
            formatter: '{value}%',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(42,74,104)'
            }
          }
        },
        series: [
          {
            data: y.length > 0 ? y : [0, 0, 0, 0, 0, 0, 0],
            type: 'line',
            // smooth: true
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgb(4,180,239)",
                borderColor: "#ffffff",
                borderType: "solid",
                borderWidth: 2,
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "12",
                    color: "#fff"
                  }
                }
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(4,180,239,0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(4,180,239,0.1)'
                }
              ])
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart2.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //mtbf接口
    getMTBF(deviceNo) {
      this.axios({
        method: 'get',
        url: '/dms/statistical/mtbfInfo',
        params: {
          deviceNo: deviceNo,
          orgCode: this.hierarchyCode,
          type: 0,
          startDate: '',
          endDate: '',
        }
      }).then(res => {
        if (res.code === 200) {
          this.mtbfYtd = res.data.ytd
          let xData = res.data.mtbfVoList.map((item) => {
            return item.applyDate.substring(5, 10);
          })
          let yData = res.data.mtbfVoList.map((item) => {
            return item.mtbf;
          })
          this.mtbfChart(xData, yData)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //mtbf
    mtbfChart(xData, yData) {
      if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
        myChart3.dispose(); //销毁
      }
      myChart3 = echarts.init(document.getElementById("mtbfechart"));
      myChart3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          name: this.languageStr === 'English' ? '单位:小时' : 'Unit:hour',
          axisLabel: {
            formatter: '{value}',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(42,74,104)'
            }
          }
        },
        series: [
          {
            data: yData,
            type: 'line',
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgb(10,135,233)",
                borderColor: "#ffffff",
                borderType: "solid",
                borderWidth: 2,
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "12",
                    color: "#fff"
                  }
                }
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(10,135,233,0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(10,135,233,0.1)'
                }
              ])
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart3.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //mttr接口
    getMTTR(deviceNo) {
      this.axios({
        method: 'get',
        url: '/dms/statistical/mttrInfo',
        params: {
          deviceNo: deviceNo,
          orgCode: this.hierarchyCode,
          type: 0,
          startDate: '',
          endDate: '',
        }
      }).then(res => {
        if (res.code === 200) {
          this.mttrfYtd = res.data.ytd
          let xData = res.data.mttrVoList.map((item) => {
            return item.applyDate.substring(5, 10);
          })
          let yData = res.data.mttrVoList.map((item) => {
            return item.mttr;
          })
          this.mttrChart(xData, yData)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //mttr
    mttrChart(xData, yData) {
      if (myChart4 != null && myChart4 != "" && myChart4 != undefined) {
        myChart4.dispose(); //销毁
      }
      myChart4 = echarts.init(document.getElementById("mttrechart"));
      myChart4.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            color: "rgb(233, 233, 233)"
          },
          axisTick: { //轴刻度线
            show: false
          },
        },
        yAxis: {
          type: 'value',
          name: this.languageStr === 'English' ? '单位:分钟' : 'Unit:minute',
          axisLabel: {
            formatter: '{value}',
            color: "rgb(202, 202, 202)"
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgb(42,74,104)'
            }
          }
        },
        series: [
          {
            data: yData,
            type: 'line',
            smooth: true,
            symbol: "circle",
            symbolSize: 10,
            itemStyle: {
              normal: {
                color: "rgb(4,175,124)",
                borderColor: "#ffffff",
                borderType: "solid",
                borderWidth: 2,
                label: {
                  formatter: "{c}",
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "12",
                    color: "#fff"
                  }
                }
              },
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(4,175,124,0.7)'
                },
                {
                  offset: 1,
                  color: 'rgba(4,175,124,0.1)'
                }
              ])
            },
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart4.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //当班OEE APQ
    classOEEChart(oee) {
      if (myChart5 != null && myChart5 != "" && myChart5 != undefined) {
        myChart5.dispose(); //销毁
      }
      myChart5 = echarts.init(document.getElementById("classOEE"));
      myChart5.setOption({
        series: [
          {
            type: 'gauge',
            radius: '100%',
            center: ['50%', '55%'],
            splitNumber: 5,
            itemStyle: {
              // shadowBlur: 10,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: 'rgba(5,90,237,1)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(0,168,245,1)',
                },
                {
                  offset: 1,
                  color: 'rgba(0,168,245,1)',
                },
              ])
            },
            progress: {
              show: true,
              width: 25,
            },
            axisLine: {
              lineStyle: {
                width: 25,
                color: [[1, 'rgb(3,42,93)']]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 0,
            },
            pointer: {
              show: false
            },
            axisLabel: {
              // distance: -5,
              show: false,
              color: '#fff',
              fontSize: 12,
            },
            title: {
              offsetCenter: [0, '-15%'],
              fontSize: 16,
              color: 'rgb(0,168,245)'
            },
            detail: {
              valueAnimation: true,
              fontSize: 22,
              offsetCenter: [0, '20%'],
              formatter: function (value) {
                return value + '%';
              },
              color: '#fff'
            },
            data: [
              {
                name: this.languageStr === 'English' ? '设备OEE' : 'OEE',
                value: oee
              }
            ]
          },
          {
            type: 'gauge',
            center: ['50%', '55%'],
            radius: '60%',
            itemStyle: {
              color: 'rgba(0,168,245,0.7)',
            },
            progress: {
              show: true,
              width: 2
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 100
              }
            ]
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart5.resize(); //myChart指自己定义的echartsDom对象
      });
    },
    //状态占比接口
    getstatusRatio(id) {
      this.axios({
        method: 'post',
        url: '/dms/agv/agv_state_rate',
        data: {
          vehicleId: id,
        }
      }).then(res => {
        if (res.code === 200) {
          let obj = {}
          for (let item of res.data) {
            if (item.state === 1) {
              obj.runTime = item.stateDuration
              obj.runRatio = Number(item.ratio)
            }
            if (item.state === 2) {
              obj.waitTime = item.stateDuration
              obj.waitRatio = Number(item.ratio)
            }
            if (item.state === 5) {
              obj.alarmTime = item.stateDuration
              obj.alarmRatio = Number(item.ratio)
            }
            if (item.state === -99) {
              obj.shutdownTime = item.stateDuration
              obj.shutdownRatio = Number(item.ratio)
            }
          }
          this.statusObj = obj
          let arr = res.data.map((item) => {
            if (item.state === 1) {
              return {value: item.stateDuration, name: '运行', itemStyle: {color: '#30c368'}}
            } else if (item.state === 2) {
              return {value: item.stateDuration, name: '待机', itemStyle: {color: '#f39a00'}}
            } else if (item.state === 5) {
              return {value: item.stateDuration, name: '报警', itemStyle: {color: '#e93446'}}
            } else if (item.state === -99) {
              return {value: item.stateDuration, name: '断线', itemStyle: {color: '#6d95b5'}}
            } else {
              return {value: item.stateDuration, name: '断线', itemStyle: {color: '#6d95b5'}}
            }
          })
          let arr1 = res.data.map((item) => {
            if (item.state === 1) {
              return {value: item.stateDuration, name: '运行', itemStyle: {color: 'rgb(43,171,93)'}}
            } else if (item.state === 2) {
              return {value: item.stateDuration, name: '待机', itemStyle: {color: 'rgb(190,106,56)'}}
            } else if (item.state === 5) {
              return {value: item.stateDuration, name: '报警', itemStyle: {color: 'rgb(194,52,59)'}}
            } else if (item.state === -99) {
              return {
                value: item.stateDuration,
                name: '断线',
                itemStyle: {color: 'rgba(109,149,181,0.7)'}
              }
            } else {
              return {
                value: item.stateDuration,
                name: '断线',
                itemStyle: {color: 'rgba(109,149,181,0.7)'}
              }
            }
          })
          this.statusRatioChart(arr, arr1)
        } else {
          //this.$Message.warning(({content:res.msg,duration:6,closable:true}));
        }
      })
    },
    //状态占比
    statusRatioChart(arr, arr1) {
      if (myChart6 != null && myChart6 != "" && myChart6 != undefined) {
        myChart6.dispose(); //销毁
      }
      myChart6 = echarts.init(document.getElementById("statusRatio"));
      myChart6.setOption({
        color: ['#30c368', '#f39a00', '#e93446', '#6d95b5'],
        series: [
          {
            type: 'pie',
            radius: ['30%', '50%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: arr
          },
          {
            type: 'pie',
            radius: ['20%', '31%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: arr1
          }
        ]
      });
      window.addEventListener("resize", function () {
        myChart6.resize(); //myChart指自己定义的echartsDom对象
      });
    }
  },
  filters: {
    formatStyle(item) {
      let style = ''
      switch (item.state) {
        case 1:
          style = 'background: rgb(55,211,118);';
          break;
        case 2:
          style = 'background: rgb(254,130,83);';
          break;
        case -99:
          style = 'background: rgb(92,105,141);';
          break;
        case 5:
          style = 'background: rgb(247,28,47);';
          break;
        default:
          style = 'background: rgb(92,105,141);';
      }
      return 'width:' + item.Width + '%;' + style;
    },
  },
  deactivated() {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    window.removeEventListener('resize', this.onresize, false);
    this.$tv.resetFindFocusType(); //this.$tv.findFocusType  = 1;
    this.$tv.resetScrollEl();
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.timer1);
    clearInterval(this.timer2);
    window.removeEventListener('resize', this.onresize, false);
    this.$tv.resetFindFocusType(); //this.$tv.findFocusType  = 1;
    this.$tv.resetScrollEl();
    next()
  },
}
</script>

<style scoped lang="scss">
.motorFactory {
  background: url(~images/bigScreen/motorFactory/bg.png) no-repeat;
  background-size: cover;
  height: 1080px;
  width: 1920px;
  position: relative;
  overflow: hidden;

  .title {
    background: url(~images/bigScreen/motorFactory/header.png) no-repeat;
    background-size: cover;
    height: 81px;
    width: 1920px;
    display: flex;
    justify-content: center;
    padding: 6px 0;

    .timer {
      position: absolute;
      right: 156px;
      top: 20px;
      font-size: 20px;
      color: #fff;
      font-family: 'digifacewide';
      span{
        font-size: 20px;
      }
    }

    .laugBox {
      position: absolute;
      right: 10px;
      top: 14px;
      background: rgb(2, 25, 49);
      padding: 5px;
      cursor: pointer;

      .changeLau {
        background: url(~images/bigScreen/motorFactory/lauBox.png) no-repeat;
        background-size: cover;
        height: 37px;
        width: 120px;
        padding: 0 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid rgba(255, 0, 0, 0);

        span {
          color: #fff;
          font-size: 16px;
        }
      }
    }

    .logo {
      background: url(~images/bigScreen/motorFactory/logo.png) no-repeat;
      background-size: cover;
      width: 106px;
      height: 54px;
      position: absolute;
      left: 10px;
      // top: 35px;
    }

    .content {
      font-size: 32px;
      span{
        font-size: 32px;
      }
      font-weight: bold;
      line-height: 36px;
      letter-spacing: 8px;
      color: #fff;
      text-shadow: 1px 1px 1px #fff;
    }

    .encontent {
      font-size: 32px;
      span{
        font-size: 32px;
      }
      font-weight: bold;
      line-height: 68px;
      color: #fff;
      text-shadow: 1px 1px 1px #fff;
    }
  }

  .content {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .leftCol {
      background: rgb(0, 32, 60);
      width: 267px;
      height: 968px;

      .changeIcon {
        background: url(~images/bigScreen/motorFactory/devTitle.png) no-repeat;
        width: 267px;
        height: 63px;
        background-size: cover;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;

        .icontext {
          font-size: 20px;
        }

        .icontext1 {
          cursor: pointer;
          font-size: 30px;
        }
      }

      .list {
        height: 905px;
        overflow: scroll;

        &::-webkit-scrollbar {
          width: 0px;
          height: 20px;
        }

        .devItem {
          background: url(~images/bigScreen/motorFactory/uncheck.png) no-repeat;
          background-size: cover;
          width: 219px;
          height: 86px;
          margin: 22px auto;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .machine {
            font-size: 16px;
            span{
              font-size: 16px;
            }
            color: #fff;
          }
        }

        .devItemCheckHong {
          background: url(~images/bigScreen/motorFactory/checkHong.png) no-repeat;
        }

        .devItemCheck {
          background: url(~images/bigScreen/motorFactory/check.png) no-repeat;
        }

        .devItemCheckHong, .devItemCheck {
          background-size: cover;
          width: 219px;
          height: 86px;
          margin: 22px auto;
        }

      }

    }

    .rightCol {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-between;
      width: 1608px;
      height: 968px;

      .smallBox {
        width: 526px;
        height: 314px;
        background: rgb(0, 32, 60);
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .boxtitle {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: space-between;

          .chinese {
            color: #fff;
            font-size: 20px;
          }

          .titleIcon {
            display: flex;
            flex-direction: column;

            .iconContent {
              display: flex;
              justify-content: flex-end;
              align-items: center;

              span {
                color: rgb(192, 232, 255);
                font-size: 16px;
                margin-right: 10px;
              }

            }

            .iconytd {
              span {
                color: #fff;
                font-size: 14px;
              }
            }
          }
        }

        .oneBox {
          width: 100%;
          height: 36%;
          background: rgb(3, 43, 77);
          display: flex;
          justify-content: space-around;

          .updownitem {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
              position: relative;
              top: -20px;
            }

            .upitem {
              font-size: 14px;
              color: rgb(142, 206, 232);
              line-height: 30px;
            }

            .downitem {
              font-size: 20px;
              color: #fff;
              text-shadow: 1px 1px 1px #fff;
            }

            .shuitem {
              width: 2px;
              height: 60px;
              background: rgb(24, 64, 101);
            }

            .upitem1 {
              font-size: 20px;
              color: #fff;
              line-height: 40px;
            }

            .downitem1 {
              font-size: 14px;
              color: #fff;
              line-height: 30px;
            }
          }
        }

        .twoBox {
          width: 100%;
          height: 60%;
          background: rgb(3, 43, 77);
          padding: 10px;
          display: flex;
          justify-content: space-around;
          align-items: center;

          .shubox {
            span {
              writing-mode: vertical-rl;
              font-size: 20px;
              color: rgb(142, 206, 232);
            }
          }

          .shubox1 {
            span {
              font-size: 20px;
              color: rgb(142, 206, 232);
            }
          }

          .hengbox {
            span {
              font-size: 20px;
              color: #fff;
            }
          }

          .hengbox1 {
            span {
              font-size: 20px;
              color: rgb(142, 206, 232);
            }
          }

          .singleImg {
            background: url(~images/bigScreen/motorFactory/numBox.png) no-repeat;
            background-size: cover;
            height: 64px;
            width: 41px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;

            span {
              font-size: 50px;
              color: rgb(0, 174, 248);
              font-family: 'longzhoufeng';
            }
          }
        }

        .chartBox {
          width: 100%;
          height: 264px;
          // background: rgb(3,43,77);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .singleBox {
            height: 100%;
            width: 49%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .singleprogress {
              .procontent {
                display: flex;
                justify-content: space-between;

                span {
                  font-size: 14px;
                  color: rgb(200, 200, 200);
                }
              }
            }
          }

          .leftBox {

            background: url(~images/bigScreen/motorFactory/circlebg.png) no-repeat;
            background-size: cover;
            width: 239px;
            height: 195px;
          }
        }

        .sectionBox {
          width: 100%;
          height: 40px;

          .boxBorder {
            width: 100%;
            height: 20px;
            border: 1px solid rgb(161, 161, 161);
            padding: 3px 5px;
            display: flex;

            .initChart {
              height: 100%;
              float: left;
              z-index: 1;
            }
          }

          .boxTime {
            display: flex;
            justify-content: space-between;

            span {
              font-size: 14px;
              color: rgb(161, 161, 161);
            }
          }
        }

        .chartBox1 {
          width: 100%;
          height: 186px;
        }
      }

      .bigBox {
        width: 1067px;
        height: 314px;
        background: rgb(0, 32, 60);
        padding: 15px 0px 15px 15px;
        display: flex;
        justify-content: space-between;

        .edgeBox1 {
          height: 100%;
          width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .downcollect {
            background: url(~images/bigScreen/motorFactory/collectbg.png) no-repeat;
            background-size: cover;
            // width: 318px;
            height: 180px;
            overflow: scroll;

            &::-webkit-scrollbar {
              width: 0px;
              height: 0px;
            }

            .singlecolImg {
              background: url(~images/bigScreen/motorFactory/collectsingle.png) no-repeat;
              background-size: cover;
              height: 28px;
              margin-left: 8px;
              margin-top: 4px;
              padding: 0 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              color: rgb(192, 192, 192);
              font-size: 14px;
              .singleKeyL,.singleKeyR{
                display: inline-block;
                width: 50%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .singleKeyL{
                text-align: left;
              }
              .singleKeyR{
                text-align: right;
              }
            }
          }

          .upcollect {
            display: flex;
            justify-content: space-around;
            align-items: center;

            .imgBox {
              display: inline-block;
              width: 90px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .uptitle {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-content: space-between;
              height: 70px;

              .uptitleup {
                color: #fff;
                font-size: 18px;
              }

              .uptitledown {
                cursor: pointer;
                color: rgb(0, 169, 246);
                font-size: 24px;
                display: inline-block;
                width: 120px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .edgeBox {
          height: 100%;
          width: 22%;
          .standardBeat{
            width: 100%;
            height: 48px;
            background: rgba(7, 68, 119, 0.2);
            .label{
              font-size: 15px;
              font-weight: 500;
              color: #91D4F3;
              line-height: 48px;
              padding-left: 11px;
            }
            .txt{
              font-size: 21px;
              font-weight: 600;
              color: #FFFFFF;
              line-height: 48px;
              text-shadow: 0px 1px 4px #14A1F8;
              vertical-align: middle;
              padding: 0 9px;
            }
            .unit{
              font-size: 15px;
              font-weight: 600;
              color: #FFFFFF;
              line-height: 48px;
              text-shadow: 0px 1px 4px #14A1F8;
            }
          }

          .classOeeBox {
            width: 100%;
            height: 60%;
            // background: rgb(3,43,77);
          }

          .apqloss {
            width: 100%;
            height: 40%;

            .apqtitle {
              text-align: center;
              font-size: 20px;
              color: rgb(159, 208, 236);
              line-height: 40px;
            }

            .apqBox {
              display: flex;
              justify-content: space-around;

              .apqsingle {
                display: flex;
                flex-direction: column;
                align-items: center;

                .apqname {
                  font-size: 20px;
                  color: rgb(159, 208, 236);

                }

                .apqnum {
                  font-size: 20px;
                  color: #fff;
                  text-shadow: 1px 1px 1px #fff;
                }
              }
            }
          }
        }

        .centerBox {
          height: 100%;
          width: 53%;
          background: rgb(3, 43, 77);
          display: flex;
          justify-content: center;
          align-items: center;

          .imgBox {
            display: block;
            width: 100%;
            height: 100%;

            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
}
.faultMessage{
  color: red;
  position: absolute;
  bottom: 2px;
}
</style>

<style lang="scss">
.motorFactory {
  .focus {
    transform: scale(1.05);
    border: 1px solid #fff !important;
    box-shadow: 0 0 20px #fff;
  }

  .ivu-progress-inner {
    background-color: rgb(4, 53, 76)
  }
}
</style>
